<%--
  Created by IntelliJ IDEA.
  User: zrw
  Date: 2020/3/31
  Time: 10:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="//unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
    <script src="//unpkg.com/vue/dist/vue.js"></script>
    <script src="//unpkg.com/element-ui@2.13.0/lib/index.js"></script>
    <script src="../../echarts/dist/echarts.min.js"></script>
    <script src="../../echarts/theme/macarons.js"></script>
    <script src="../../js/jquery-3.4.1.min.js"></script>
    <style type="text/css">
        h1 {
            color: #86868b;
            font-size: 22px;
            text-align: center;
        }
        .block {
            width: 800px;
            margin: 10px auto;
        }
        .demonstration {
            color: #86868b;
            margin-left: 50px;
        }
        input.el-input__inner {
            color: #86868b;
            font-weight: 600;
        }
        #chart {
            width: 800px;
            height: 400px;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <h1>分时成交量统计折线图</h1>
    <div id="app">
        <el-row>
            <el-col :span="24">
                <template>
                    <div class="block">
                        <span class="demonstration">选择查询日期：</span>
                        <el-date-picker
                            v-model="value1"
                            type="date"
                            placeholder="选择日期"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            @change="getSelectedTime">

                        </el-date-picker>
                    </div>
                </template>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <div id="chart">

                </div>
            </el-col>
        </el-row>
    </div>
    <script>
        var Main = {
            data() {
                return {
                    value1: '${now}'
                }
            },
            methods: {
                getSelectedTime(val) {
                    $.ajax({
                        type: 'post',
                        url: 'getChartDatas',
                        data: 'date=' + val,
                        success: function(data) {
                            mon = [];
                            success = [];
                            for (i in data) {
                                mon[i] = data[i].mon;
                                success[i] = data[i].success;
                                chart.setOption({
                                    xAxis: {
                                        data: mon
                                    },
                                    series: [{
                                        name: '成交量',
                                        data: success
                                    }]
                                })
                            }
                        }
                    });
                }
            }
        };
        var Ctor = Vue.extend(Main);
        new Ctor().$mount('#app');
        var data = ${data};
        var mon = [];
        var success = [];
        for (i in data) {
            mon[i] = data[i].mon;
            success[i] = data[i].success;
        }
        var chart = echarts.init(document.getElementById('chart'), 'macarons');
        var option = {
            title: {
                text: ''
            },
            tooltip: {},
            legend: {
                data: ['成交量']
            },
            xAxis: [
                {
                    type: 'category',
                    data: mon,
                    axisTick: {
                        alignWithLabel: true
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            width: 1,
                            type: 'solid'
                        }
                    }
                }
            ],
            yAxis: {
                type: 'value',
                splitLine: {
                    show: true,
                    lineStyle: {
                        width: 1,
                        type: 'solid'
                    }
                }
            },
            series: [{
                name: '成交量',
                type: 'line',
                showSymbol: true,
                symbol: 'circle',
                symbolSize: 10,
                smooth: true,
                data: success
            }]
        };
        chart.setOption(option);
    </script>
</body>
</html>
